<script setup lang="ts">
import { h } from "vue";
import { useRouter } from "vue-router";
import { Plus } from "@element-plus/icons-vue";
import { ElButton, ElInput } from "element-plus";

import EnumTag from "@/components/common/EnumTag.vue";
import { ProSelect } from "@/modules/package/form";

import ApiActivity from "@/api/activity";
import useProTable from "@/hooks/useProTable";
import { EnumStatus } from "@/utils/enum";

const router = useRouter();

const tableColumns = [
  { label: "序号", type: "index", width: 70 },
  { label: "权益模板名称", prop: "package_title", minWidth: 220 },
  {
    label: "状态",
    width: 120,
    slot: ({ row }: any) =>
      h(EnumTag, { options: EnumStatus, value: row.status }),
  },
  {
    label: "操作",
    width: 130,
    slot: ({ row }: any) =>
      h(
        ElButton,
        {
          link: true,
          type: "primary",
          onClick: () => router.push(`/activity/package/modify/${row.id}`),
        },
        "编辑"
      ),
  },
];

const formItems = [
  {
    label: "模板名称",
    children: {
      field: "package_title",
      type: ElInput,
      props: {
        clearable: true,
        placeholder: "请输入模板名称",
      },
    },
  },
  {
    label: "状态",
    children: {
      field: "status",
      type: ProSelect,
      props: {
        clearable: true,
        options: EnumStatus,
      },
    },
  },
];

const [ProTable] = useProTable({
  fetchUrl: ApiActivity.packageList,
  tableOptions: {
    columns: tableColumns,
  },
  formOptions: {
    formItems,
  },
});
</script>

<template>
  <ProTable>
    <template #tool-left>
      <ElButton
        :icon="Plus"
        type="primary"
        @click="router.push(`/activity/package/create`)"
        >新增权益模板
      </ElButton>
    </template>
  </ProTable>
</template>
